<!-- 商品属性 -->
	<template>
		<div id="brand">
			<div id="bgkt">
				<img src="../../assets/logo.png" id="home" /> > 商品属性
			</div>
			<div id="bgk">
				<div id="brandbody">
					<div id="sous">
						<div id="sousl">
							<img src="../../assets/logo.png" />
						</div>
						<div id="souslspan">筛选查询</div>
						<div id="sousr">
							<span>模糊查询</span>
							<input type="text" placeholder="请输入商品属性名称" v-model="name.attributeName" id="sousrk" />
							<input type="button" value="查询" class="sousrb" @click="loaDate()" />
						</div>
					</div>
				</div>
				<div id="brandfoot">
					<div id="brandfoot_1">
						<input type="button" value="新增" class="sousrb" @click="dialogFormVisible = true" />
						<input type="button" value="修改" @click="updatebtn()" class="sousrb"  />
						<input type="button" value="删除" @click="deletAttributee()" class="sousrb" />
						<!-- <el-button type="danger" plain :disabled="isShow" @click="deleteGoods">删除</el-button> -->
					</div>
				</div>
				<div>
					<el-dialog title="新增品牌信息" :visible.sync="dialogFormVisible" width="800PX">
						<el-form :model="form">
							<!-- 属性编号
							<el-input v-model="insertData.attributeNumber"></el-input> -->
							类型名称
							<el-input v-model="insertData.attributeName"></el-input>
							排序
							<el-input v-model="insertData.atributeNum"></el-input>
							属性值是否可选
							<br />
							<el-radio v-model="insertData.attributeChoice" label='唯一属性'>唯一属性</el-radio>
							<el-radio v-model="insertData.attributeChoice" label='单选属性'>单选属性</el-radio>
							<el-radio v-model="insertData.attributeChoice" label='复选属性'>复选属性</el-radio>
							<br />
							可选值列表
							<el-input v-model="insertData.atributeEntry"></el-input>
						</el-form>
						<div slot="footer" class="dialog-footer">
							<el-button @click="dialogFormVisible = false">取 消</el-button>
							<el-button type="primary" @click="insertParameter">新增</el-button>
						</div>
					</el-dialog>
				</div>
				<!-- 修改 -->
				<div>
					<el-dialog title="修改品牌信息" :visible.sync="dialogFormVisible2" width="800PX">
						<el-form :model="form">
							    <!-- 属性编号
								<el-input v-model="updateData.attributeNumber"></el-input> -->
								类型名称
								<el-input v-model="updateData.attributeName"></el-input>
								排序
								<el-input v-model="updateData.atributeNum"></el-input>
								属性值是否可选
								<br />
								<el-radio v-model="updateData.attributeChoice" label='唯一属性'>唯一属性</el-radio>
								<el-radio v-model="updateData.attributeChoice" label='单选属性'>单选属性</el-radio>
								<el-radio v-model="updateData.attributeChoice" label='复选属性'>复选属性</el-radio>
								<br />
								可选值列表
								<el-input v-model="updateData.atributeEntry"></el-input>
						</el-form>
						<div slot="footer" class="dialog-footer">
							<el-button @click="dialogFormVisible2 = false">取 消</el-button>
							<el-button type="primary" @click="UpdateParameter">修改</el-button>
						</div>
					</el-dialog>
				</div>
				<template>
					<el-table :data="tableData"  border style="width: 100%" @select='onTableSelect'
						@selection-change="handleSelectionChange">
						<el-table-column align="center" width="50" type="selection"> </el-table-column>
						<el-table-column prop="attributeId" label="编号" width="180" >
						</el-table-column>
						<el-table-column prop="attributeName" label="属性名称" width="180">
						</el-table-column>
						<el-table-column prop="attributeChoice" label="属性是否可选">
						</el-table-column>
						<el-table-column prop="atributeEntry" label="可选值列表">
						</el-table-column>
						<el-table-column prop="atributeNum" label="排序">
						</el-table-column>
					</el-table>
				</template>
				<el-pagination @current-change="changePage" background layout="prev, pager, next"
				  :total="total" :current-page="page.indexPage"
				  :page-size="10"
				  style="float: right;margin-right: 25px;">
				</el-pagination>
			</div>
		</div>
	</template>
	
	<script>
		export default {
			data() {
				return {
					attributeStatus:[//库存状态
						{value:0,label:"唯一属性"},
						{value:1,label:"单选属性"},
						{value:1,label:"复选属性"}
					],
					isShow:false,
					page:{//分页参数
						indexPage:1,
						pageSize:10
					},
					total:0,//总页数
					upList:[],
					//商品分類信息集合
					gdList: [],
					gdList2: [],
					//id集合
					list: [],
					brandIdList: [],
					goodsfl: '',
					chex: [],
					//按钮
					bth: [],
					insertData: {
						attributeId:null,
						attributeNumber: null,
						attributeName: null,
						atributeNum: null,
						attributeChoice: null,
						atributeEntry:null
					},
					//修改品牌信息
					updateData: {
						attributeNumber: '',
						attributeName: '',
						atributeNum: '',
						attributeChoice: '是',
						atributeEntry: ''
						
					},
					yema: {
						current: 0,
						pages: 0,
					},
					dialogTableVisible: false,
					dialogFormVisible: false,
					dialogFormVisible2: false,
					name: {
						attributeName:null
					},
					goodsData: [],
					goodsData2: [{
						catDesc: "",
						catLev: "",
						catRoute: "",
						evalPicDef: "",
						goodId: "",
						goodName: "",
						isShow: "",
						sortNo: "",
						tCatId: "",
						unit: "",
					}],
					selects:[],
					tableData: [],
					// gridData: [],
					form: {},
					formLabelWidth: '120px'
				}
			},
			created(){
				this.selectAttribute();
				//this.loaDate();
			},
			methods: {
				//根据条件查找
				loaDate() {
				this.$http.post("/goods-attribute/queryAttribute",{
								attributePageParam:this.page,
								attributeQueryByCriteriaParam:this.name
								}).then((resp)=>{
									console.log(resp.data.data)
						this.tableData=resp.data.data.attributeDtoList;
						this.total=resp.data.data.pageSize;
						this.page.indexPage=resp.data.data.indexSize;
					}).catch(function(error){
						alert(error);
					})
				},
				
				//查询属性
				selectAttribute(){
					this.$http.get("/goods-attribute/attributeInquiry").then(resp=>{
						console.log(resp.data.data)
						this.tableData=resp.data.data.attributeDtoList;
							this.total=resp.data.data.pageSize;
							this.page.indexPage=resp.data.data.indexSize;
						}).catch(function(error){
						    alert(error);
					})
				},
				onTableSelect(rows, row) {
					let selected = rows.length && rows.indexOf(row) !== -1
					console.log(selected);
				},
				//新增的
				onTableSelect2(rows, row) {
					let selected = rows.length && rows.indexOf(row) !== -1
					console.log(selected);
				},
				handleSelectionChange(val) {
					this.selects=[];
					for(var i=0;i<val.length; i++){
						this.selects.push(val[i].attributeId)
					}
					this.multipleSelection = val;
					this.list = val;
					this.upList = val;
					console.log(this.upList);
				},
				// handleSelectionChange2(val) {
				// 	this.gdList = val;
				// 	console.log(val);
				// },
				//修改的
				onTableSelect3(rows, row) {
					let selected = rows.length && rows.indexOf(row) !== -1
					console.log(selected);
				},
				handleSelectionChange3(val) {
					this.gdList2 = val;
					console.log(val);
				},
				//更新按钮
				updatebtn(){
					if(this.upList.length==1){
						this.dialogFormVisible2 =true;
						this.updateData.attributeNumber=this.upList[0].attributeNumber;
						this.updateData.attributeName=this.upList[0].attributeName;
						this.updateData.atributeNum=this.upList[0].atributeNum;
						this.updateData.attributeChoice=this.upList[0].attributeChoice;
						this.updateData.atributeEntry=this.upList[0].atributeEntry;
					}else{
						alert("请每次选择一个修改");
					}	
				},
				//查询大类名称
				// selectspfl(){
				// 	this.$http.get("/goods/selectCategoryName").then(resp=>{
				// 		this.goodsData=resp.data.data.selectCategoryNameListDtos;
				// 	})
				// },
				//新增
				insertParameter(){
					this.$http.post("/goods-attribute/addAttribute",this.insertData).then(resp=>{
						if(resp.data.code==707){
								alert("添加成功");
								//this.loaDate();
								this.dialogFormVisible();
								this.selectAttribute();
							}else{
								alert("添加失败");
							}
						}).catch(function(error){
							console.log(error);
					})
				},
				changePage(index){
				   this.page.indexPage=index;
				   this.showGoods();
				},
				//修改
				UpdateParameter() {
						for (var i = 0; i < this.gdList2.length; i++) {
							this.updateData.list.push(this.gdList2[i].goodId)
						}
						console.log(this.updateData.list);
						this.dialogFormVisible2 = false;
						this.$http.put("goods-attribute/updateAttribute",
							this.updateData
						).then(resp=>{
							if(resp.data.code==705){
								this.$message({
									message:'修改成功',
									type:'success',
								})
								this.page.indexPage=1;
								this.selectAttribute();
								this.dialogFormVisible2=false;
							}else{
								this.$message({
									message:'修改失败',
									type:'success',
								})	
							}
						})
				},
				// handleSelectionChange(sel){
				// 	this.selects=[];
				// 	for(var i=0;i<sel.length; i++){
				// 		this.selects.push(sel[i].brandId)
				// 	}
				// },
				//删除商品品牌
				deletAttributee(){
					this.$http.post("/goods-attribute/deleteAttribute",{
						idsList:this.selects
					}).then((resp)=>{
						if(resp.data.code==703){
							this.$message({
								message:'删除成功',
								type:'success'
							})
							this.page.indexPage=1;
							this.selectAttribute();
						}else{
							this.$message({
								message:'删除失败',
								type:'success',
							})	
						}
					})
				}
				
			}
		}
	</script>
	      
	<style>
	    #bgkt {
			width: 90%;
			height: 40px;
		}
	
		#bgk {
			float: left;
			border: #2C3E50 0px solid;
			width: 95%;
			height: 500px;
			background-color: whitesmoke;
		}
	
		#sous {
			width: 90%;
			height: 40px;
			float: left;
			border: #D8D8D8 2px solid;
			margin-left: 70px;
			margin-top: 20px;
			background-color: #E6E6E6;
		}
	    
		#home {
			width: 20px;
			height: 20px;
		}
	
		#sousl {
			float: left;
			width: 40px;
			height: 100%;
			border-right: #D8D8D8 2px solid;
		}
	
		#sousl img {
			width: 35px;
			height: 35px;
		}
	
		#souslspan {
			float: left;
			width: 80px;
			height: 30px;
			border: #2C3E50 0px solid;
			margin-left: 10px;
			margin-top: 8px;
		}
	
		#sousr {
			float: right;
			width: 550px;
			height: 100%;
			border: #2C3E50 0px solid;
			line-height: 40px;
		}
	
		#sousrk {
			height: 70%;
			width: 240px;
			margin-left: 20px;
		}
	
		.sousrb {
			width: 100px;
			height: 30px;
			color: #FFFFFF;
			background-color: #848484;
			margin-left: 30px;
		}
	
		#brandfoot {
			width: 100%;
			height: 40px;
			border: #2C3E50 0px solid;
			float: left;
			background-color: #E6E6E6;
			margin-top: 15px;
		}
	
		#brandfoot_1 {
			width: 430px;
			height: 30px;
			border: #2C3E50 0px solid;
			float: right;
			margin-top: 5px;
		}
	
		.bd {
			width: 300px;
			height: 300px;
			border: #2C3E50 1px solid;
			float: left;
		}
	
		#ymbt {
			border: #2C3E50 0px solid;
			width: 130px;
			height: 30px;
			float: left;
			margin-top: 10px;
		}
		
		
	</style>